33. Warsztaty backendu cz. 2

Do naszego reactowego projektu musimy dodać backend, który będzie jednocześnie naszym API, oraz serwerem pozwalającym na wyświetlanie naszej strony. Pomoże nam w tym poniższy film.

Pobierz pliki backendu

Kolejnym krokiem rozwoju naszej aplikacji będzie powiązanie frontendu z backendem. Wykorzystamy do tego znany już nam React-Thunk.

Po poprzednim tygodniu warsztatów nasz projekt powinien już mieć widoki, które korzystają z reduksowego stanu aplikacji. Weźmy na początek kontener listy ogłoszeń, wyświetlanej na stronie głównej. Powinien on wyglądać mniej więcej tak:

const mapStateToProps = state => ({
  posts: getAllPublished(state),
});

const Container = connect(mapStateToProps)(Component);

W tym przykładzie getAllPublished byłby selektorem postów zaimportowanym z pliku postsRedux.js, który mógłby wyglądać tak:

export const getAllPublished = ({posts}) => posts.data.filter(item => item.status == 'published');

Teraz chcemy usunąć zawartość posts.data z pliku initialState.js. Zamiast tej zawartości będziemy pobierać ogłoszenia z naszego API. Dodaj do kontenera mapowanie thunka, np. w ten sposób:

const mapStateToProps = state => ({
  posts: getAllPublished(state),
});

const mapDispatchToProps = dispatch => ({
  fetchPublishedPosts: () => dispatch(fetchPublished()),
});

const Container = connect(mapStateToProps, mapDispatchToProps)(Component);

Natomiast w pliku postsRedux.js umieść ten kreator thunka:

/* thunk creators */
export const fetchPublished = () => {
  return (dispatch, getState) => {
    dispatch(fetchStarted());

    Axios
      .get('http://localhost:8000/api/posts')
      .then(res => {
        dispatch(fetchSuccess(res.data));
      })
      .catch(err => {
        dispatch(fetchError(err.message || true));
      });
  };
};

Pozostaje nam jeszcze wykorzystać funkcję zmapowaną na propsa fetchPublishedPosts – i właśnie to jest Twoim zadaniem!

Aby przetestować czy wszystko działa poprawnie, możesz na początku wykonywać tę funkcję w momencie renderowania komponentu. Nie będzie to jednak zbyt optymalne rozwiązanie, ponieważ po każdej zmianie jakiegokolwiek propsa tego komponentu, posty byłyby na nowo pobierane z serwera.

Dlatego wewnątrz thunka dodaj logikę, która sprawi, że posty zostaną pobrane tylko w przypadku, gdy w reduksowym stanie aplikacji nie ma żadnych elementów w posts.data, a posts.loading.active ma wartość false.

Jeśli wszystko dobrze poszło, mamy już gotową full-stackową aplikację. Udało nam się stworzyć zarówno frontend oparty o Reacta i Reduksa, jak i backend korzystający z Expressa i MongoDB.

Oczywiście, gorąco zachęcamy Cię do samodzielnego rozwijania tej aplikacji. Możesz dodać do niej dowolne funkcjonalności, jakie tylko przyjdą Ci do głowy! Inspiracji warto szukać na portalach typu OLX, Gratka czy Gumtree.

Powodzenia!

W kolejnym submodule znajdziesz formularz zapisu na egzamin oraz wszystkie informacje na jego temat.

Minęło już sporo czasu od poprzedniego egzaminu, więc najpierw przypomnimy Ci informacje przygotowujące do egzaminu.

Podobnie jak poprzednio, egzamin końcowy będzie składał się z pytań testowych wielokrotnego wyboru oraz zadań praktycznych. Cały egzamin, w tym zadania praktyczne, odbędzie się na platformie rekrutacyjnej, z której często korzystają pracodawcy w trakcie rekrutacji developerów. Tego typu platformy pozwalają na automatyczne sprawdzenie poprawności rozwiązania za pomocą testów jednostkowych.

Zadania treningowe

Dla powtórki korzystania z testów jednostkowych w zadaniach praktycznych możesz skorzystać z zadań przygotowującego, które znasz już z poprzedniego egzaminu.

Pobierz pliki zadań

Rozpakuj pobraną paczkę z zadaniami do swojego folderu z projektami i przejdź do podkatalogu 1.example. Przeczytaj treść zadania w pliku README.md i otwórz plik src/app.js, w którym znajduje się kod naszej aplikacji.

Otwórz terminal w podkatalogu 1.example i najpierw uruchom komendę npm install (lub yarn), aby zainstalować niezbędne pakiety. Następnie wykonaj komendę npm run test (lub yarn test). Po chwili testy zostaną wykonane i zobaczysz ich wyniki.

Oprócz zadania 1.example, w paczce zip znajdziesz też drugie zadanie – 2.styling – tym razem dotyczące kodu SCSS. W nim również znajdziesz opis w pliku README.md, i podobnie wymaga ono edycji wyłącznie plików w katalogu src (w tym wypadku: src/style.scss). Pamiętaj, że w katalogu drugiego zadania również musisz uruchomić npm install (lub yarn), zanim uruchomisz testy.

Rozwiązań tych zadań nie musisz nigdzie wysyłać. Są one dodatkowymi materiałami, które przegotowaliśmy dla Ciebie, aby przygotować Cię do egzaminu. Więcej informacji o samym egzaminie znajdziesz w kolejnym submodule, ale warto już teraz wspomnieć, że w czasie egzaminu będziesz pracować w edytorze online, więc nie będziesz lokalnie uruchamiać projektu.

Aby było Ci łatwiej zapoznać się z platformą egzaminacyjną, pierwszym zadaniem praktycznym na egzaminie będzie zadanie 1.example. Za to zadanie nie będą przyznane żadne punkty, ponieważ służy wyłącznie zapoznaniu się z edytorem online.

Zakres materiału na egzaminie końcowym

Egzamin końcowy obejmuje Reacta, Reduksa oraz backend (Express i MongoDB), ale oczywiście te zagadnienia wykorzystują również uzyskaną wcześniej wiedzę z zakresu HTML, CSS oraz JavaScript.

Egzamin nie obejmuje zagadnień z zakresu: Redux-Thunk, Axios, AJAX, WebSocket. Nie będzie poruszony również temat aplikacji Node.js, które nie wykorzystują Expressa (np. z wykorzystaniem Electrona).

Pamiętaj, że egzamin skupia się na zrozumieniu materiału i praktycznych umiejętnościach. Nie musisz wykuwać dokumentacji ani żadnych definicji! Zamiast tego powtórz sobie tworzenie komponentów ze sprawdzaniem typów propsów, podłączanie komponentów do reduksowego stanu aplikacji za pomocą kontenerów, oraz tworzenie prostego API za pomocą Expressa i MongoDB.

Powodzenia!

Poniżej znajdziesz wszystkie niezbędne informacje, potrzebne do podejścia do egzaminu końcowego.

W ramach Twojego pakietu wsparcia w poszukiwaniu pracy egzamin jest obowiązkowy. W razie wątpliwości skontaktuj się ze swoim Doradcą ds. Zatrudnienia.

Na podejście do egzaminu masz 2 tygodnie od daty uruchomienia kolejnego modułu.

Próg zaliczenia egzaminu wynosi 75%. Jest to minimum niezbędne do tego, by utrzymać Gwarancję Pracy.

Opis platformy egzaminacyjnej

Egzamin odbywa się na platformie rekrutacyjnej Devskiller. Pracodawcy często korzystają z tego rodzaju platform testowych w trakcie rekrutacji programistów. Wybraliśmy to rozwiązanie, aby lepiej przygotować Cię do procesów rekrutacyjnych, z którymi spotkasz się już niedługo. Egzamin odbywa się przez internet i wykonujesz go samodzielnie (nie łączysz się z żadnym Mentorem ani Egzaminatorem).

Etapy egzaminu

1. Pytania testowe, 10 pytań po 2 minuty (w sumie 20 minut),
2. Przerwa - 30 minut,
3. Przykładowe zadanie praktyczne - 30 minut,
4. Zadanie praktyczne z Reacta - 45 minut,
5. Przerwa - 30 minut,
6. Zadanie praktyczne z Reduksa - 45 minut.
7. Przerwa - 30 minut,
8. Zadanie praktyczne z Expressa - 45 minut.

Wszystkie czasy podane powyżej są limitem czasu. Każde pytanie, zadanie czy przerwę możesz zakończyć szybciej. Z tego względu, egzamin nie powinien zająć Ci więcej niż 3 godziny, ale na wszelki wypadek zarezerwuj sobie co najmniej 4 godziny.

Rodzaje zadań

1. Pytania testowe, w których należy zaznaczyć wszystkie poprawne odpowiedzi (jedną lub więcej). Ten rodzaj zadań ćwiczyliśmy do tej pory w quizach powtórkowych.

2. Zadania praktyczne, w których otrzymasz fragment kodu do poprawienia lub uzupełnienia. Pierwsze z zadań praktycznych jest przykładowe — nie otrzymasz za nie żadnych punktów, ale będziesz mieć okazję zaznajomić się z edytorem oraz strukturą projektu. Pamiętaj, że m.in. to przykładowe zadanie znalazło się w poprzednim module, w materiałach przygotowujących do egzaminu.

Przydatne informacje

1. Jeśli chcesz lepiej przygotować się do egzaminu, wróć do quizów powtórkowych we wcześniejszych modułach. Rozwiąż też zadania udostępnione powyżej (submoduł "Przygotowanie do egzaminu").
2. Zadbaj o czas i miejsce, które pozwolą Ci się skupić na egzaminie. Jeśli to możliwe, wycisz swój telefon i uprzedź bliskich, aby w tym czasie Ci nie przeszkadzali.
3. Nie można wracać do wcześniejszych zadań, więc uważnie czytaj polecenia i zastanów się nad odpowiedzią, zanim przejdziesz do kolejnego zadania. Każde zadanie ma limit czasu.
4. W niektórych pytaniach testowych jest kilka poprawnych odpowiedzi — zaznacz wszystkie.
5. Nie przerywaj egzaminu — możesz do niego podejść tylko raz. W trakcie egzaminu możesz robić przerwy tylko pomiędzy etapami wymienionymi poniżej.
6. Jeśli przypadkiem zamkniesz egzamin, możesz ponownie go otworzyć za pomocą linka w mailu z zaproszeniem na egzamin.
7. Wyniki otrzymasz w ciągu tygodnia od podejścia do egzaminu.

Zapis na egzamin

Do przystąpienia do egzaminu niezbędne jest zapisanie się na egzamin.

Pamiętaj:

• na egzamin możesz zapisać się tylko raz,
• link z zaproszeniem otrzymasz najpóźniej następnego dnia roboczego,
• zaproszenie będzie ważne przez dwa tygodnie.

Przed zapisaniem się na egzamin:

1. zaplanuj czas, w którym są najmniejsze szanse, że ktoś będzie Ci przeszkadzał,
2. zaplanuj miejsce, które pozwoli Ci skupić się na egzaminie,
3. zaplanuj sprzęt (laptop, internet), który nie będzie powodował problemów.

Najpóźniej dzień przed planowanym podejściem do egzaminu wypełnij poniższy formularz.

Powodzenia!